<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色渐变</title>
    <style>
        .box,.two{
            display: flex;
        }
        .ex{
            width: 200px;
            height: 200px;
            border: solid;
        }
        /* 上到下 */
        .ex01{
            background-image: linear-gradient(
                #a52a2a,#0000cd);
        } 
        /* 左到右 */
        .ex02{
            background-image: linear-gradient(
               90deg, #a52a2a,#0000cd
            );
        }
        /* 右下到左上 */
        .ex03{
            background-image: linear-gradient(
                -45deg,#ff3333,blue
            );
        }
        /* 左下到右上 */
        .ex04{
            background-image: linear-gradient(
                60deg,blue,#ff3333
            );
        }
        /* 多个颜色线性渐变 */
        .ex05{
            background-image: linear-gradient(
               #ff3333,#00d000,blue 
            );
        }
        /* 彩虹颜色线性渐变 */
        .ex06{
            
            background-image: linear-gradient(
             90deg, #943232, yellow, #00d000,rgb(14, 14, 206),#4b0082
            );
        }
        /* 带透明度线性渐变 */
        .ex07{
            background-image: linear-gradient(
                90deg, rgba(250,0 ,0 ,0.1),rgba(250,0,0,0.8) 70%
            );
        }
        /* 为圆的径向渐变 */
        .ex08{
            background-image: radial-gradient(
             blue 5%,rgb(35, 83, 47) 30% ,yellow 60%,black
            ) ;
        }
        /* 重复的径向渐变 */
        .ex09{
            background-image: repeating-radial-gradient(
            50px 80px,#ff3333 3%, yellow 6%,blue 10% 
            );
        }
        /* 文字渐变 */
           .ex10{
              font-size: 20px;
            background-image: linear-gradient(90deg,  pink,blue,rgb(206, 14, 24));
                color: transparent;
                background-clip: text;
                -webkit-background-clip: text;
           }
    </style>
</head>
<body>
<div class="box">
    <div class="ex ex01"></div>
    <div class="ex ex02"></div>
    <div class="ex ex03"></div>
    <div class="ex ex04"></div>
    <div class="ex ex05"></div>
</div>
<div class="two">
     <div class="ex ex06"></div>
    <div class="ex ex07"></div>
    <div class="ex ex08"></div>
    <div class="ex ex09"></div>
    <div class="ex ex10">我是飒飒阿萨    
    </div>
</div>
</body>
</html>